<template>
  <div class="container-courierInformation">
    <!-- 面包屑组件 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>快递公司信息</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 按钮 -->
    <div class="mainBox">
      <div class="mainTitle">快递公司管理</div>
      <div class="mainEditor">
        <el-button
          type="success"
          icon="el-icon-edit-outline"
          size="small"
          @click="pullCourier"
          >拉取</el-button
        >
      </div>
      <div class="mainTable">
        <!-- 表格 -->
        <el-table
         v-loading="loading"
        :fit="true"
          size="small"
          :data="tableData"
          border
          style="width: 100%"
          class="tabalBox"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
           <!-- <el-table-column type="index" width="45" label="序号"></el-table-column> -->
          <el-table-column prop="courierName" label="快递名称"> </el-table-column>
          <el-table-column prop="courierNameCode" label="快递名称编码"> </el-table-column>
          <el-table-column prop="status" label="状态"> </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="reqParams.pageNum"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="reqParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'logisticsInformation',
  data () {
    return {
      reqParams: {
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      // 控制添加快递信息展示
      total: 0,
      isChecked: false,
      // 选中的选项的所有id
      selectIndex: [],
      loading: true
    }
  },
  created () {
    this.getCourierData()
  },
  methods: {
    // 获取后台数据
    async getCourierData () {
      const res = await this.$http.get('/api/platApi/wuLiu/sysExpressCompany/list', { params: this.reqParams })
      if (res.status === 200) {
        this.tableData = res.data.data.records
        this.tableData.forEach(el => {
          el.status = el.status === 1 ? '激活' : '未激活'
          el.auth = el.auth === 1 ? '管理员' : '操作员'
        })
        this.total = res.data.data.total
        this.loading = false
      }
    },
    async pullCourier () {
      const res = await this.$http.get('/api/platApi/wuLiu/sysExpressCompany/pullExpressCompanyData')
      if (res.status === 200 && res.data.code === 1) {
        this.$message({
          message: '拉取信息成功',
          type: 'success'
        })
        this.getCourierData()
      } else {
        this.$message({
          message: res.data.msg,
          type: 'error'
        })
      }
    },
    // 点击选项，获取选中的项的id，点击删除时，可以批量删除
    handleSelectionChange (val) {
      if (val.length === 0) {
        this.isChecked = false
      } else {
        this.isChecked = true
        this.selectIndex = []
        val.forEach((item, i) => {
          this.selectIndex.push(item.id)
        })
      }

      // console.log(val)
    },
    // 每页显示总条数
    handleSizeChange (newSize) {
      this.reqParams.pageSize = newSize
      this.getCourierData()
    },
    handleCurrentChange (newPage) {
      this.reqParams.pageNum = newPage
      this.getCourierData()
    }
  }
}
</script>

<style scoped lang="less">
.el-button {
  margin-top: 20px;
}
.el-table {
  margin-top: 20px;
  margin-bottom: 20px;
  /deep/thead {
    color: #333;
  }
  // /deep/tr {
  //   padding: 0 !important;
  //   height: 20px;
  //   line-height: 20px;
  //   font-size: 12px;
  // }
  /deep/td {
    padding: 0 !important;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
  }
  .el-button {
    margin: 5px;
  }
}
.el-dialog {
  width: 200px;
}
</style>
